<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="incrementBtn">点击递增</button>
    <input />
    <p id="result"></p>

    <script>
        const incrementBtn = document.getElementById('incrementBtn');
        const result = document.getElementById('result');
        let count = 0;

        incrementBtn.addEventListener('click', () => {
            count++;
            result.innerHTML = `递增次数: ${count}`;
        });

        // vue双向绑定、响应式的理解
        // 双向绑定： 定义一个变量，这个变量绑定到相关的视图里，视图更新之后，变量也跟着更新，或者变量更新之后，视图有跟着更新
        // 里面的原理：主要用到是数据属性的拦截，页面或者组件初始化的时候，会在get里用依赖收集，收集页面哪里依赖到这个属性，后面更新这个属性的时候，会在set里相对
        // 应触发到这个属性相关dom更新。这个属性也就是响应式属性。
    </script>
</body>
</html>
